<template>
  <div>
    <ButtonGroup
      v-if="!isEdit"
      :options="clueButtons"
      style="margin-bottom: 20px"
      @click="handleButtonClick"
    />
    <p-table
      class="table-list-container"
      row-key="id"
      :columns="columns"
      bordered
      :pagination="false"
      :scroll="{ y: 350 }"
      :data-source="selectBusiness"
      :row-selection="rowSelectionMixin"
      :loading="load"
      @change="handleTableChange"
    >
      <a
        slot="opportunityNo"
        slot-scope="text"
        @click="handleNumberClick(text)"
      >
        {{ text }}
      </a>
    </p-table>
    <!-- <DialogVisitBusinessList
      :visible.sync="visibleVisit"
      @change="changeVisit"
    /> -->
  </div>
</template>

<script>
import mixinTable from '@/mixins/mixin-table.js';

export default {
  components: {},
  mixins: [mixinTable],
  props: {
    selectBusiness: {
      type: Array,
      default: () => [],
    },
    businessKeys: {
      type: Array,
      default: () => [],
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    load: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visibleVisit: false,
    };
  },
  computed: {
    stateOptions() {
      return this.$store.state.dictionary.dict['business_status'] || {};
    },
    nodeOptions() {
      return (
        this.$store.state.dictionary.dict['business_stage_process_node'] || {}
      );
    },
    applicationOptions() {
      return this.$store.state.dictionary.dict['application'] || {};
    },
    orgOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
      });
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '商机编号',
          dataIndex: 'opportunityNo',
          scopedSlots: { customRender: 'opportunityNo' },
        },
        {
          align: 'center',
          title: '商机名称',
          dataIndex: 'opportunityName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '商机状态',
          dataIndex: 'state',
          customRender: (text) => this.stateOptions[text],
          ellipsis: true,
        },
        {
          align: 'center',
          title: '商机阶段',
          dataIndex: 'stage',
          customRender: (text) => this.nodeOptions[text],
          ellipsis: true,
        },
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrgCode',
          customRender: (text) => this.orgOptions[text],
          ellipsis: true,
        },
        {
          align: 'center',
          title: '应用别',
          dataIndex: 'appCategory',
          customRender: (text) => this.applicationOptions[text],
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
        },
        // {
        //   align: 'center',
        //   title: '创建人部门',
        //   dataIndex: 'createUserDeptName',
        //   ellipsis: true,
        // },
      ];
      return columns;
    },
    clueButtons() {
      const disabled = !this.rowSelectionMixin.selectedRowKeys.length;
      return [
        {
          key: 'businessAdd',
          type: 'primary',
          label: '关联商机',
          icon: 'plus',
          authKey: '',
        },
        {
          key: 'add',
          label: '新增商机',
          icon: 'plus',
          authKey: '',
        },
        {
          key: 'businessDelete',
          label: '删除',
          icon: 'delete',
          authKey: '',
          disabled,
        },
      ];
    },
  },
  methods: {
    handleNumberClick(text) {
      const routeUrl = this.$router.resolve({
        path: '/business-follow',
        query: {
          opportunityNo: text,
        },
      });
      window.open(routeUrl.href);
    },
    addCallback() {
      this.$router.push({
        path: '/business-follow',
        query: {
          business: 'true',
        },
      });
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    businessAddCallback() {
      this.$emit('add-business');
    },
    businessDeleteCallback() {
      const ids = [];
      this.rowSelectionMixin.selectedRows.forEach((item) => {
        ids.push(item.opportunityNo);
      });
      this.$confirm(`该操作将删除 ${ids.length} 条数据，是否确认？`)
        .then(() => {
          this.$emit('delete-business', ids);
          this.rowSelectionMixin.selectedRowKeys = [];
        })
        .catch(() => {
          // console.log('e: ', e);
        });
    },
  },
};
</script>
